<template>
    <el-dialog v-model="opDialog" :title="staticData.title" :width="staticData.width" :before-close="handleClose">
        <el-form :model="opForm" ref="opRef" :rules="opRules" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="案件状态" prop="lawcase_status">
                        <el-select v-model="opForm.lawcase_status" clearable placeholder="请选择">
                            <el-option v-for="(item,index) in lawcase_status" :key="index" :label="item.value" :value="item.name"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="跟进状态" prop="follow_status">
                        <el-select v-model="opForm.follow_status" clearable placeholder="请选择">
                            <el-option v-for="(item,index) in follow_status" :key="index" :label="item.value" :value="item.name"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="处理时间" prop="deal_time">
                        <el-date-picker v-model="opForm.deal_time" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="耗时(小时)" prop="hour">
                        <el-input v-model="opForm.hour" placeholder="请输入耗时(小时)"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="法院通知" prop="court_status">
                <el-select v-model="opForm.court_status" multiple collapse-tags clearable placeholder="请选择">
                    <el-option v-for="(item,index) in court_status" :key="index" :label="item.value" :value="item.name"/>
                </el-select>
            </el-form-item>
            <el-form-item label="跟进详情" prop="info">
                <el-input type="textarea" :rows="5" v-model="opForm.info" placeholder="请输入跟进详情"></el-input>
            </el-form-item>
            <el-form-item label="上传附件" prop="files">
                <Upload v-model:fileList="opForm.files" :size="200" accept=".jpg,.png,.docx,.pdf,.xlsx,.pptx,.zip,.rar" :limit="100"></Upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button :loading="btnLoading" type="primary" @click="handleSubmit">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import Upload from '@/views/Common/UpFiles.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed, watch } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: {
            Upload
        },
        props: {
            opDialog: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            staticData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            lawcase_status: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        emits: ['update:opDialog', 'handleSubmit'],
        setup(props) {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                follow_status: computed(() => store.state.configEnable.follow_status),
                court_status: computed(() => store.state.configEnable.court_notice),

                //Form表单
                btnLoading: false,
                opRef: '',
                opForm: {
                    lawcase_id: '',
                    lawcase_status: '',
                    follow_status: '',
                    deal_time: '',
                    hour: '',
                    court_status: '',
                    info: '',
                    files: [],
                },
                opRules: {
                    lawcase_status: [
                        { required: true, message: '请选择案件状态', trigger: 'blur' }
                    ],
                    follow_status: [
                        { required: true, message: '请选择跟进状态', trigger: 'blur' }
                    ],
                    deal_time: [
                        { required: true, message: '请选择处理时间', trigger: 'blur' }
                    ],
                    hour: [
                        { required: true, message: '请输入耗时(小时)', trigger: 'blur' }
                    ],
                },

                //上传文件
                fileList: [],

                //窗口
                opDialog: computed({
                    get: ()=>{
                        return props.opDialog
                    },
                    set: ()=>{
                        return props.opDialog
                    }
                }), 
            })

            //提交
            const handleSubmit = () => {
                let files = [];
                if(!state.opForm.files || state.opForm.files.length > 0){
                    for(let key in state.opForm.files){
                        files.push(state.opForm.files[key].url);
                    }
                }
                state.opRef.validate((valid) => {
                    if(valid){
                        state.btnLoading = true;
                        proxy.$http.post('/oa/Lawcase/noteForm', {
                            lawcase_id: props.staticData.lawcase_id,
                            lawcase_status: state.opForm.lawcase_status,
                            follow_status: state.opForm.follow_status,
                            deal_time: String(state.opForm.deal_time),
                            hour: state.opForm.hour,
                            court_status: String(state.opForm.court_status),
                            info: state.opForm.info,
                            files: String(files),
                        })
                        .then(res=> {
                            state.btnLoading = false;
                            const { code, msg ,data } = res;
                            if(code != 1){
                                return proxy.$msg.error(msg);
                            }else{
                                state.opDialog = false;
                                proxy.$msg.success('提交成功');
                                proxy.$emit('update:opDialog', false);
                                proxy.$emit('handleSubmit');
                                proxy.$refs.opRef.resetFields();
                            }
                        })
                    }
                })
            }

            //关闭弹窗
            const handleClose = () => {
                proxy.$emit('update:opDialog', false);
                proxy.$refs.opRef.resetFields();
            }

            //监听传参
            watch(props.staticData,(value)=> {
                state.opForm.lawcase_status = value.lawcase_status;
            })
            
            //Dom加载
            onMounted(()=>{
                
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                handleSubmit,
                handleClose,
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
    
</style>